<template>
	<z-paging :refresher-enabled="true" :auto="false" ref="paging" :auto-scroll-to-top-when-reload="false"
		v-model="dataList" @query="getList">
		<view class="list">
			<view class="item fw" v-for="(item ,index) in dataList" @click="navChat(item)">
				<view class="avatar">
					<image :src="item.lastAvatarUrl" mode="aspectFill"></image>
				</view>
				<view class="cotent">
					<view class="nameAndTime fw">
						<view class="name omit">{{item.lastName}}</view>
						<view class="time small">{{item.lastMsgTime}}</view>
					</view>
					<view class="messageAndTotal fw">
						<view class="message small omit">
							{{lastMsgContext(item)}}
						</view>
						<view class="total">
							<up-badge type="warning" max="99" :value="item.unReadNum" bgColor="#F54A2A"></up-badge>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow, onHide, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import api from "@/utlis/api.js"
	const paging = ref(null)
	const dataList = ref();

	onShow(() => {
		setTimeout(() => {
			paging.value.reload()
		}, 50)
	})

	function lastMsgContext(row) {
		if (row.lastMsgType) {
			return row.lastMsgType == 'text' ? row.lastMsgContext : "图片"
		} else {
			return ""
		}
	}

	function navChat(row) {
		api(`app/chat/chatbase/join-chat?userId=${row.toId}`, "POST").then(res => {
			if (res.code === 200) {
				console.log(res)
				uni.navigateTo({
					url: `/pages/message/detail?chatId=${res.data}`
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 500
				});
			}
		});

	}

	async function getList(pageNo, pageSize) {
		api(`app/chat/chatbase/me/list?pageNum=${pageNo}&pageSize=${pageSize}`, "GET")
			.then(res => {
				console.log(res)
				paging.value.complete(res.rows);
			});
	}
</script>

<style lang="scss">
	.fw {
		display: flex;
		flex-wrap: wrap;
	}

	.item {
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid rgba(100, 100, 100, 0.1);

		.avatar {
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}
		}

		.cotent {
			width: 610rpx;
			padding-left: 20rpx;
			box-sizing: border-box;

			>view {
				line-height: 50rpx;
			}

			.small {
				font-size: 20rpx;
				color: #888A94;
			}

			.omit {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.name {
				width: 74%;
				font-size: 35rpx;
			}

			.time {
				width: 26%;
				text-align: right;
			}

			.message {
				width: 84%;
			}

			.total {
				width: 16%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
		}
	}
</style>